import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// NProgress.start() // 开启进度条
// NProgress.done() // 关闭进度条

// 权限控制
import router, { asyncRoutes } from '@/router'
import store from '@/store'
import getPageTitle from '@/utils/get-page-title'

//  to:要去哪个页面
//  from:从哪里来
//  next:它是一个函数。
//     如果直接放行 next()
//     如果要跳到其它页 next(其它页)
router.beforeEach(async(to, from, next) => {
  NProgress.start() // 开启进度条
  // getPageTitle 导入花裤衩封装的获取网页标题的函数实现
  // console.log(to, 'toto')
  document.title = getPageTitle(to.meta.title)
  // 页面发生跳转时一定会记过这里
  // console.log(to, from)
  const whiteList = ['/login', '/404']
  const token = store.state.user.token
  if (token) {
    // 以登录
    // 判断是否去登录页 是的话强行跳转到首页
    if (to.path === '/login') {
      // 如果 next(指定的跳转路径) 就不会经过 router.afterEach() 这个 钩子函数
      // 所以要手动关闭进度条
      next('/')
      NProgress.done()
    } else {
      // 不是的话放行
      // 判断用户信息是否已经获取，如果获取了就不需要在获取了
      if (!store.state.user.userInfo.userId) {
      // 触发 actions中的函数，获取用户信息
        const menus = await store.dispatch('user/getDataIofo')
        console.log(menus, '用户页面级别的权限数据')
        // console.log(asyncRoutes, 'asyncRoutes')

        const filterRouter = asyncRoutes.filter(router => {
          return menus.includes(router.children[0].name)
        })
        // 动态的添加用户可以访问的路由
        // { path: '*', redirect: '/404', hidden: true } 将404路由对象放到所有动态路由的后面，解决了404刷新问题
        filterRouter.push({ path: '*', redirect: '/404', hidden: true })
        router.addRoutes(filterRouter)
        // 将用户可以访问的路由，传到vuex进行储存
        store.commit('menus/upMenus', filterRouter)
        // 解决刷新出现白屏的问题
        // 使用next({ ...to, replace: true }) 来确保 addRoutes() 时确保动态添加的路由已经被完全加载上去
        // replace: true 保证动态路由路由添加完成了，才会访问对应的页面
        next({ ...to, replace: true })
      } else {
        next()
      }
    }
  } else {
    // 没登录
    // 判断是否去白名单是的话放行
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 不是的话强行跳转到 登录页
      next('/login')
      NProgress.done()
    }
  }
})

// y页面跳转完成会经过这个 钩子函数
router.afterEach(() => {
  NProgress.done() // 关闭进度条
})
